<template>
    <!-- 销量统计 -->
  <div class="salestatistics">
    <div class="head">
      <el-row type="flex" align="middle">
        <el-col :span="5" style="text-align: left">
          <p style="font-weight: 700">销量统计</p>
        </el-col>
        <el-col :span="5" :offset="8" type="flex" align="middle">
          <div>
            <el-tabs
              style="margin: 0"
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
              :stretch="true"
            >
              <el-tab-pane label="本日" name="first"> </el-tab-pane>
              <el-tab-pane label="本周" name="second"></el-tab-pane>
              <el-tab-pane label="本月" name="third"></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-date-picker
            v-model="dateValue"
            style="width: 100%"
            type="daterange"
            range-separator=""
            start-placeholder="请选择日期范围"
          >
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <Echarts :echartsData="echartsData" :idName="'salestatistics'"  ref="echarts"></Echarts>
     </div>
  </div>
</template>

<script>
import Echarts from '../../components/echarts.vue'
export default {
components:{
    Echarts
},
data(){
  return {
    activeName:"first",
    dateValue:'',
   echartsData:{
    xAxisData: ['0:00-2:00', '2:00-4:00', '4:00-6:00', '8:00-10:00', '10:00-12:00', '12:00-14:00', '14:00-16:00','16:00-18:00','18:00-20:00','20:00-22:00','22:00-24:00'],
    series: [
    {
      name: 'APP',
      type: 'bar',
      data: [ 500, 102, 101, 134, 160, 200, 200,32,204,204,240]
    },
    {
      name: '微信端',
      type: 'bar',
      data: [ 190, 105, 131, 134, 160, 200, 200,32,204,214,10]
      }
  ]
   
  },
  }
},
mounted() {
    // this.option.xAxis[0].axisLabel.interval =
    //   this.option.xAxis[0].data.length > 12 ? 1 : 0;

  },

methods:{
  handleClick(tab, event) {
    this.dateValue=""
      this.option.xAxis[0].axisLabel.interval =
        this.option.xAxis[0].data.length > 12 ? 1 : 0;
      this.$refs.echarts.show();

      }

}
}
</script>

<style scoped>
* {
  padding: 0;
}
.head {
  padding-left: 20px;
  /* padding-top:20px */
}
.content {
  padding: 20px;
}
::v-deep .el-tabs__header {
margin:0
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #dfe4ed;
}
</style>